<template>
  <ul class="ulLi" :class="`ul_${parentId}`">
    <li
        v-for="(item,index) in data"
        :key="item[key]||index"
        :class="`level_`${item.id||index}"
    >
      <span>{{item[label]}}</span>
    </li>
  </ul>
</template>

<script lang="ts">

export default {
  setup(props){
    const name:string = 'ulLi';
    interface dataItem{
      name: string,
    }
    const {
      data:Array,
      key:string='index',
      label:string='label',
      parentId:number = 1,
    } = props;
    return {
      name,
      data,
      key,
      label,
      parentId
    }
  }
}
</script>
